<template>
<div class="container">
  <div class="row">
    <div class="col-xs-3" id="subtitles">
      <sidebar :page="currentPage"></sidebar>
    </div>
    <div class="col-xs-9">
      <h5 v-for="content in currentPage.contents">
          <h2 :id="'section-'+content.id">{{content.name}}</h2>
          <span v-html="content.content"><span>
      </h5>
    </div>
  </div>
</div>
</template>

<script>
import Sidebar from './Sidebar.vue'

export default {
  name: "wikiPage",
  components: {
    sidebar: Sidebar
  },
  data() {
    // 事先模拟一个数据
    let existingEntry = {
      user: {
        name: '二哲',
        email: 'kodo@forchange.cn',
        image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
      },
      comment: '我的一个备注',
      totalTime: 2,
      date: '2016-11-03'
    }
    return {
      timeEntries: [existingEntry],
      wikiName: '我的Wiki',
      wikiIcon: 'wrench',
      totalTime: 2,
      activeNav: '',
      currentPage: {},
      navList: [{
        id: 'home',
        name: '首页'
      }, {
        id: 'menu1',
        name: '菜单1'
      }, {
        id: 'menu2',
        name: '菜单2'
      }, {
        id: 'menu3',
        name: '菜单3'
      }]
    }
  },
  watch: {
    '$route' (to, from) {
      this.getPage();
      this.scrollToSection();
    }
  },
  methods: {
    scrollToSection() {
      var sectionId = this.$route.query.section;
      if (sectionId != undefined) {
        $("html, body").animate({
          scrollTop: ($('#section-' + sectionId).offset().top - 20) + "px"
        }, {
          duration: 300,
          easing: "swing"
        });
      }
    },
    deleteTimeEntry(timeEntry) {
      //这个方法用于删除某一项计划
      let index = this.timeEntries.indexOf(timeEntry);
      if (window.confirm('确定要删除吗?')) {
        this.timeEntries.splice(index, 1);
        // this.$dispatch('deleteTime', timeEntry);
        this.$emit('deleteTime', timeEntry);
      }
    },
    timeUpdate(timeEntry) {
      this.timeEntries.push(timeEntry);
      // 继续触发上一级的
      this.$emit('timeUpdate', timeEntry);
    },
    active(navId, event) {
      this.activeNav = navId;
    },
    inActive() {
      this.activeNav = "";
    },
    isActive(navId) {
      return this.activeNav == navId;
    },
    getPage() {
      var navId = this.$route.params.id;
      this.currentPage = {
        id: "page1",
        title: "Vue简介",
        nav: {
          id: 'menu2',
          path: '/time-entries',
          name: '菜单2'
        },
        contents: [{
          id: "1",
          name: "Vue.js是什么",
          content: '<p>Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p>'
        }, {
          id: "2",
          name: "起步",
          content: "<p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p><p>尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue:</p>"
        }, {
          id: "3",
          name: "声明式渲染",
          content: "<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。</p>"
        }]
      };
    }
  },
  created() {
    this.getPage(this.$route.params.id);
  }
}
</script>

<style>
.avatar {
  height: 75px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.user-details {
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  margin: -10px 0;
}

.time-block {
  padding: 10px;
}

.comment-section {
  padding: 20px;
}
</style>
